<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="4" :xs="24">
                <el-row ref="hMain">
                    <el-col :span="24">
                        <div class="head-container">
                            <el-input v-model="deptName" placeholder="请输入名称" clearable prefix-icon="el-icon-search"
                                style="margin-bottom: 20px" />
                        </div>
                        <el-row :gutter="10" class="mb8">
                            <el-col :span="1.5">
                                <el-button type="primary" plain icon="el-icon-plus" @click="treeHandleAdd"
                                    size="small">新增</el-button>
                            </el-col>
                            <el-col :span="1.5">
                                <el-button type="success" plain icon="el-icon-edit" @click="treehandleUpdate"
                                    size="small">修改</el-button>
                            </el-col>
                            <el-col :span="1.5">
                                <el-button type="danger" plain icon="el-icon-delete" @click="handleTreeDelete"
                                    size="small">删除</el-button>

                            </el-col>
                        </el-row>

                    </el-col>
                </el-row>

                <div class="head-container" :style="{ height: treeHeight + 'px' }" style="overflow: auto">
                    <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
                        :filter-node-method="filterNode" :default-expanded-keys="expandedkeys"
                        :current-node-key="currentNodekey" ref="tree" node-key="id" default-expand-all highlight-current
                        @node-click="handleNodeClick" :style="isSize">
                        <template slot-scope="{ node, data }">
                            <span class="span-ellipsis" :title="node.label">{{ node.label }}</span>
                        </template>
                    </el-tree>

                </div>
            </el-col>
            <el-col :span="20" :xs="24" v-if="ishid">
                <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="queryParams.title" placeholder="请输入标题" clearable
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="责任者" prop="zrz">
                        <el-input v-model="queryParams.zrz" placeholder="请输入责任者" clearable
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                    <el-form-item label="日期" prop="rq">
                        <el-date-picker v-model="queryParams.rq" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-row :gutter="10" class="mb8" ref="refbut">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd">添加</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" plain icon="el-icon-delete" @click="handleDelete">批量删除</el-button>
                    </el-col>
                    <el-col :span="1.5">
                      <el-button type="warning" plain icon="el-icon-download" @click="handleExport">下载</el-button>
                    </el-col>
                    <el-col :span="1.5">
                      <el-button type="warning" plain icon="el-icon-minus"  @click="onClickTap('qzj')">打印</el-button>
                    </el-col>
                </el-row>
                <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange" :height="tableHeight"
                    border>
                    <el-table-column type="selection" width="50" align="center" />
                    <el-table-column label="序号" sortable align="center" type="index" />
                    <el-table-column label="标题" align="center" prop="title" :show-overflow-tooltip="true" />
                    <el-table-column label="责任者" align="center" prop="zrz" :show-overflow-tooltip="true" />
                    <el-table-column label="日期" align="center" prop="rq" :show-overflow-tooltip="true" />
                    <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
                    <el-table-column label="操作" align="center" width="380px">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-edit"  @click="handleDeit(scope.row)">修改</el-button>
                            <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>

                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </el-col>
        </el-row>
      
        <!-- 全宗树添加-->
        <el-dialog :title="treeTitle" :visible.sync="treeOpen" width="35%" append-to-body>
            <!-- :disable-branch-nodes="true" -->
            <el-form ref="treeForm" :model="treeForm" :rules="treeRules" label-width="80px">
                <el-form-item label="上级菜单" prop="parentId" v-if="treeForm.parentId !=0&&treeForm.parentId!=undefined"  >
                    <treeselect v-model="treeForm.parentId" :options="deptOptions"  label
                        placeholder="请选择" noOptionsText="暂无数据" :disabled="isDisabled"   :clearable="false"   :normalizer="normalizer"
                        :style="isStyle ? 'line-height: 32px;font-size:12px' : 'line-height: 36px;font-size:14px'" />
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="treeForm.name" placeholder="请输入名称" maxlength="30" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitTrreForm">确 定</el-button>
                <el-button @click="treeCancel">取 消</el-button>
            </div>
        </el-dialog>
        <deitView v-if="open" :open="open" @closeDelDialog="closeDelDialog" :rowData="rowData" :infoData="infoData" @submitForm="submitForm">
        </deitView>
    </div>
</template>
<script>

  import estimateTableHeight from '@/mixins/estimateTableHeight' //vue项目中element-tabel自动计算高度
  import {
    getqzjsj,
    geturl,
    qzjAdd,
    qzjDeilte,
    qzjdeit,
    qzjdel,
    qzjInfoDel,
    qzjInfoList,
    qzjList
  } from "@/api/archive/application/generalJuan.js"
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import deitView from '@/views/archive/application/generalJuan/deit.vue'

  export default {
    dicts: ['sys_normal_disable', 'basic_data_fieldtype'],
    mixins: [estimateTableHeight], // 混入方法
    components: {
        Treeselect,
        deitView
    },
    data() {

        return {
            rowData: "",//当前点击树信息
            // 选中数组
            ids: [],
            label: [],
            //元数据方案树是否显示弹出层
            treeOpen: false,
            //列表否显示弹出层
            open: false,
            //元数据方案树弹出层(标题)
            treeTitle: "",
            //元数据方案整理方式：添加可以编辑，修改时禁止编辑
            isDisabled: false,
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 元数据方案树选项
            deptOptions: undefined,
            //获取当前点击的元数据方案树
            deptOptionsRow: undefined,
            //更具当前点击的元数据方案树 显示元数据明细查询类型
            deptOptionsRowType: undefined,
            //默认展开的树节点
            expandedkeys: [],
            //默认选中的树节点
            currentNodekey: "",
            // 部门名称
            deptName: undefined,
            defaultProps: {
                children: "children",
                label: "label"
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                treeId: undefined,
                title: undefined,
                rq: undefined,
                zrz: undefined
            },
            //树表单参数
            treeForm: {
                parentId: undefined,
                name: undefined
            },
            //树表单校验
            treeRules: {
                name: [
                    { required: true, message: '请输入全宗名称', trigger: 'blur' },
                ],

            },

            ishid:false,

            list: [],
            infoData:[],
            deilteInfo:{}
        }
    },
    watch: {
        // 根据名称筛选部门树
        deptName(val) {
            this.$refs.tree.filter(val);
        },
    },
    created() {
        if (this.$store.getters.size == 'small') {
            this.isStyle = true
        } else {
            this.isStyle = false
        }
        this.getDeptTree();
    },
    mounted() { },
    computed: {
        isSize() {

            if (this.$store.getters.size == 'small') {
                this.size = 'font-size: 12px;'
            } else {
                this.size = 'font-size: 14px;'
            }
            return this.size
        }


    },
    methods: {

                 // 只能选择数据下面有children 的数据，没有children的时候禁用
     normalizer(node) {
            if (node.children == null || node.children == undefined || !node.children.length) {
                delete node.children;
            }
            return node
        },

        /** 查询全宗下拉树结构 */
        getDeptTree() {
            qzjList().then(response => {
                this.deptOptions = response.data;
            });
        },

        // 节点单击事件
        handleNodeClick(data) {
            this.rowData = data;
            console.log(data)
            this.queryParams.treeId = data.id;
            this.ishid=true;
            this.getList();
        },

        //全宗添加
        treeHandleAdd() {
            var that = this;
            this.reset();
            if (this.rowData != undefined) {
                this.treeForm.parentId = this.rowData.id
            }
            that.treeOpen = true;
            that.treeTitle = "添加全宗";
            this.isDisabled = false

        },
        //元数据方案树修改
        treehandleUpdate() {
            this.reset();
            qzjDeilte(this.rowData.id).then(response => {
                this.deilteInfo=response.data;
                this.treeForm.parentId = response.data.parentId
                this.treeForm.name = response.data.name
                this.treeForm.id=response.data.id
                this.treeOpen = true;
                this.isDisabled = true
                this.treeTitle = "修改全宗 ";
            });
        },

        //元数据方案树添加提交
        submitTrreForm() {
            console.log(this.treeForm, "lsdkfjkl")
            if (this.treeForm.parentId == undefined) {
                this.treeForm.parentId = 0;
            }
            this.$refs["treeForm"].validate((valid) => {
                if (valid) {
                    if (this.treeForm.id != null) {
                        qzjdeit(this.treeForm).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.treeOpen = false;
                            this.getDeptTree();
                            this.rowData = undefined
                        });
                    } else {
                        qzjAdd(this.treeForm).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.treeOpen = false;
                            this.getDeptTree();
                            this.rowData = undefined
                        });
                    }
                }
            })
        },
        //全宗修改取消
        treeCancel() {
            var that = this;
            that.treeOpen = false;
        },
        //删除全宗
        handleTreeDelete() {
            this.$modal.confirm('是否确认删除元数据方案名称为"' + this.rowData.label + '"的数据项？').then(() => {
                qzjdel({ ids: this.rowData.id }).then(res => {
                    this.getDeptTree();
                    this.$modal.msgSuccess("删除成功");
                    this.rowData = undefined
                    this.reset();
                })

            }).catch(() => { });
        },

        // 表单重置
        reset() {
            this.treeForm = {
                name: undefined,
                parentId: undefined
            }
        },

        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.getList();
        },

        //列表添加
        handleAdd() {
            var that = this;
            this.open = true
            this.infoData=undefined
        },

        //列表修改
        handleDeit(row){
            var that=this;
            this.open = true
            this.infoData=row;

        },
        handleDelete(row) {
            const ids = row.id || this.ids;
            if (ids.length !== 0) {
                this.$modal.confirm('是否确认删除数据？').then(function () {
                    return qzjInfoDel({ids:ids.toString()})
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => { });
            } else {
                this.$modal.msgError("请选择要删除的数据");
            }
        },
        /** 下载按钮操作 */
        handleExport() {
          this.download('archive/qzjInfo/export/'+this.queryParams.treeId,
            {...this.queryParams},
            `${this.rowData.label}_${new Date().getTime()}.xlsx`)
        },
        //关闭添加
        closeDelDialog() {
            this.open = false
        },

        //添加
        submitForm() {
            this.open = false
            this.getList();
        },
        getList() {
            qzjInfoList(this.queryParams).then(res => {
                this.loading = false;
                this.list = res.rows
                this.total = res.total
            })
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
      //打印
      onClickTap(type) {
          var text = ''
          var datalist = ['data'];
       
           var name='qzjdy';

            
              getqzjsj(
                this.queryParams.treeId,
                //boxId: this.ids.toString(),
                ///type: name,
                //menuId: 111222333

              ).then(res => {
                console.log("res",res)
                geturl({
                  categoryId: this.queryParams.treeId,
                  menuId: 111222333,
                  type: name,
                  data: res.msg,
                  datalist: JSON.stringify(datalist)

                }).then(res1 => {
                    console.log(res1.data.result == "fail",res1.data.result)
                  if (res1.data.result == "fail") {
                    this.$message({ message: res1.data.msg, type: 'warning' })
                  } else {
                    window.open(res1.data.url);
                  }

                })
              })
      },

    }
}
</script>
<style lang="less" scoped>
::v-deep.el-selectTree .el-input {
    width: 300px;
}

.span-ellipsis {
    display: block;
    // font-size: 14px;
}


::v-deep .el-dialog {
    padding: 0px 30px 20px 0px !important;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}

::v-deep .el-form-item__content {
    line-height: 26px;
}
</style>
